<template>
  <div class="wft-w-h-100">
    <van-swipe
      class="v-swiper"
      :autoplay="attrs.interval"
      :duration="attrs.duration"
      :initial-swipe="attrs.current"
      :show-indicators="attrs.indicator"
      :indicator-color="attrs.indicatorInactiveColor">
      <van-swipe-item v-for="item in value" :key="item.id">
        <img v-if="item.type === 'image'" :src="item.url" class="wft-w-h-100">
        <video v-else :src="item.url" :autoplay="true" :loop="true" :muted="true" class="wft-w-h-100 video-cover" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script setup lang='ts'>
import { useAttrs, useTempValue } from 'generator/hooks'

const props = defineProps<{
  panelJson: TPanel
  curComp: TComp
}>()

const attrs = useAttrs(props.curComp.attrs)

const value = useTempValue(attrs, props.curComp, props.panelJson)
</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
}

:deep(.v-swiper) {
  height: 100%!important;
}

.video-cover {
  object-fit: cover;
}
</style>